Border and pseudo-shadow

COOLjsMenu and COOLjsMenu Professional allow you to specify borders and shadows for your menus. Each submenu and each item can be configured separately via styles (see "Styles" example for details).

var color = { border:"#666666", shadow:"#DBD8D1", bgON:"white", bgOVER:"#B6BDD2" };
var css = { ON:"styleOn", OVER:"styleOver" };
var STYLE = { border:1, shadow:2, color:color, css:css };

In the color variable field "shadow" is the color of the shadow, and field "border" is the color of the border. Size of the border is controlled by field "border" of the STYLE variable (0 means no border, 1 - one pixel wide, 2 - two pixels wide, etc.), and size of the shadow (i.e. displacement) is controlled by field "shadow" of the STYLE variable (0 means no shadow, 1 - one pixel displacement, 2 - two pixels displacement, etc.). Be sure to take in account border size when calculating item's height and width.

COOLjsMenu Professional allows some additional manipulations with border (here is an example).